<template>
  <div>
    <app-container>
      <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" />
      <div class="generate-block">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button type="primary">重置</el-button>
      </div>
    </app-container>
    <app-container>
      <generate-table ref="generateTable" :data="jsonData" :remote="remoteFuncs" :value="editData"/>
      <div class="generate-block">
        <el-button type="primary" @click="open6()">提交</el-button>
        <el-button type="primary">重置</el-button>
      </div>
    </app-container>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  name: 'AccountCancellationApply',
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      jsonData: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '公司代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1540191318000_13437' }, 'key': '1540191318000_13437', 'model': 'input_1540191318000_13437', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '开户单位', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1540191337000_9817' }, 'key': '1540191337000_9817', 'model': 'input_1540191337000_9817', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540191300000_68741' }, 'key': '1540191300000_68741', 'model': 'grid_1540191300000_68741', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '账户类别', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'AccountType' }, 'key': '1540191350000_47014', 'model': 'select_1540191350000_47014', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '账户状态', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'Accountstatas' }, 'key': '1540191378000_89577', 'model': 'select_1540191378000_89577', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540191344000_78722' }, 'key': '1540191344000_78722', 'model': 'grid_1540191344000_78722', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '账号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1540191467000_55305' }, 'key': '1540191467000_55305', 'model': 'input_1540191467000_55305', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '账户名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1540191487000_87952' }, 'key': '1540191487000_87952', 'model': 'input_1540191487000_87952', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540191465000_86524' }, 'key': '1540191465000_86524', 'model': 'grid_1540191465000_86524', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }, 'table': { 'showRemove': false, 'showIndexCol': false, 'showEdit': false, 'showExport': false, 'showAdd': false, 'stripe': true, 'border': true }},
      jsonDataTable: {
        'list': [
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '公司代码',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'remoteFunc': 'func_1540193002000_83525'
                    },
                    'key': '1540193002000_83525',
                    'model': 'input_1540193002000_83525',
                    'rules': []
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '开户单位',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'remoteFunc': 'func_1540193350000_15624'
                    },
                    'key': '1540193350000_15624',
                    'model': 'input_1540193350000_15624',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1540192987000_49244'
            },
            'key': '1540192987000_49244',
            'model': 'grid_1540192987000_49244',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '账号',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'remoteFunc': 'func_1540193363000_92410'
                    },
                    'key': '1540193363000_92410',
                    'model': 'input_1540193363000_92410',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '账户名',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'remoteFunc': 'func_1540193368000_70940'
                    },
                    'key': '1540193368000_70940',
                    'model': 'input_1540193368000_70940',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1540193356000_11756'
            },
            'key': '1540193356000_11756',
            'model': 'grid_1540193356000_11756',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'select',
                    'name': '申请原因',
                    'icon': 'regular/caret-square-down',
                    'options': {
                      'defaultValue': '',
                      'multiple': false,
                      'disabled': false,
                      'clearable': false,
                      'placeholder': '',
                      'required': false,
                      'showLabel': false,
                      'width': '100%',
                      'options': [
                        {
                          'value': '下拉框1'
                        },
                        {
                          'value': '下拉框2'
                        },
                        {
                          'value': '下拉框3'
                        }
                      ],
                      'remote': true,
                      'remoteOptions': [],
                      'props': {
                        'value': 'value',
                        'label': 'label'
                      },
                      'remoteFunc': 'ApplyCause'
                    },
                    'key': '1540193398000_73718',
                    'model': 'select_1540193398000_73718',
                    'rules': []
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '附件',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'remoteFunc': 'func_1540193446000_7622'
                    },
                    'key': '1540193446000_7622',
                    'model': 'input_1540193446000_7622',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1540193373000_53457'
            },
            'key': '1540193373000_53457',
            'model': 'grid_1540193373000_53457',
            'rules': []
          }
        ],
        'config': {
          'labelWidth': 100,
          'labelPosition': 'right'
        },
        'table': {
          'showRemove': false,
          'showIndexCol': false,
          'showEdit': false,
          'showExport': false,
          'showAdd': false,
          'stripe': true,
          'border': true
        }
      },
      editData: {},
      values: {},
      remoteFuncs: {

        AccountType(resolve) {
          // 账户类别 select_1540191350000_47014
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('账户类别').then(response => { resolve(response.data) })
        },

        Accountstatas(resolve) {
          // 账户状态 select_1540191378000_89577
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('账户状态').then(response => { resolve(response.data) })
        }

      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    },
    open6() {
      this.$confirm('是否确定注销该账户？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '保存',
        cancelButtonText: '取消'
      }).then(() => {
        this.$message({
          type: 'info',
          message: '保存修改'
        })
      }).catch(action => {
        this.$message({
          type: 'info',
          message: action === 'cancel'
            ? '已取消提交'
            : '停留在当前页面'
        })
      })
    }
  }
}
</script>
